<template>
   <el-form ref="userRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="用户昵称" prop="nickName">
         <el-input v-model="form.nickName" maxlength="30" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phonenumber">
         <el-input v-model="form.phonenumber" maxlength="11" />
      </el-form-item>
      <!-- <el-form-item label="邮箱" prop="email">
         <el-input v-model="form.email" maxlength="50" />
      </el-form-item> -->
      <el-form-item label="所属学校" prop="schoolId">
        <!-- <el-input v-model="form.schoolId" maxlength="50" /> -->
        <el-select v-model="form.schoolId" filterable @change="queryChangeSchoolSelect()" placeholder="请选择学校">
          <el-option
            v-for="school in schoolList"
            :key="school.id"
            :label="school.name"
            :value="school.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属学院" prop="collegeId">
        <!-- <el-input v-model="form.collegeId" maxlength="50" /> -->
        <el-select v-model="form.collegeId" :disabled="(form.schoolId==null||form.schoolId=='')?true:false" filterable @change="queryChangeCollegeSelect()" placeholder="请选择学院">
          <el-option
            v-for="college in collegeList"
            :key="college.id"
            :label="college.name"
            :value="college.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属专业" prop="specialtyId">
        <!-- <el-input v-model="form.specialtyId" maxlength="50" /> -->
        <el-select v-model="form.specialtyId" :disabled="(form.collegeId==null||form.collegeId=='')?true:false" filterable placeholder="请选择专业">
          <el-option
            v-for="specialty in specialtyList"
            :key="specialty.id"
            :label="specialty.name"
            :value="specialty.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在年级" prop="grade">
        <el-select v-model="form.grade" filterable placeholder="请选择年级">
          <el-option
            v-for="grade in gradeList"
            :key="grade.dictValue"
            :label="grade.dictLabel"
            :value="grade.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别">
         <el-radio-group v-model="form.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
         </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button type="danger" @click="close">关闭</el-button>
      </el-form-item>
   </el-form>
</template>

<script setup>
// import { updateUserProfile } from "@/api/system/user";
import { updateStudent } from "@/api/forum/student";
import useBaseStore from "@/store/forum/base";
import useUserStore from "@/store/modules/user";
import { ref,getCurrentInstance,watch,computed } from "vue";

const { proxy } = getCurrentInstance();
const schoolList = computed(() => {
  return useBaseStore().schoolList
})
const collegeList = computed(() => {
  return useBaseStore().filterCollegeList
})
const specialtyList = computed(() => {
  return useBaseStore().filterSpecialtyList
})
const gradeList = computed(() => {
  return useBaseStore().gradeList
})

const form = ref({
  studentId: null,
  nickName: '',
  sex: '',
  phonenumber: '',
  schoolId: null,
  collegeId: null,
  specialtyId: null,
  grade: '',
});
const rules = ref({
  nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
  email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
  phonenumber: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
  schoolId: [{ required: true, message: "所属学校不能为空", trigger: "blur" }],
  collegeId: [{ required: true, message: "所属学院不能为空", trigger: "blur" }],
  specialtyId: [{ required: true, message: "所属专业不能为空", trigger: "blur" }],
  grade: [{ required: true, message: "所在年级不能为空", trigger: "blur" }],
});

/** 提交按钮 */
function submit() {
  proxy.$refs.userRef.validate(valid => {
    if (valid) {
      updateStudent(form.value).then(response => {
        if(response.code==200){
          proxy.$modal.msgSuccess("修改成功");
          useUserStore().updateUser();
        }else if(response.code==330){
          // proxy.$modal.msgSuccess("修改失败");
        }else{
          proxy.$modal.msgSuccess("修改失败");
        }
      });
    }
  });
}

/** 关闭按钮 */
function close() {
  proxy.$tab.closePage();
}
// 回显当前登录用户信息useBaseStore
watch(() => useUserStore().update, user => {
  // if (user) {
    form.value = { 
      studentId: useUserStore().id,
      nickName: useUserStore().nickName,
      sex: useUserStore().sex,
      phonenumber: useUserStore().phone,
      schoolId: useUserStore().schoolId,
      collegeId: useUserStore().collegeId,
      specialtyId: useUserStore().specialtyId,
      grade: useUserStore().grade,
    };
    // console.log(form.value);
  // }
},{ immediate: true });

// 选择学校选项
function queryChangeSchoolSelect(){
  useBaseStore().changeSchool(form.value.schoolId);
  form.value.collegeId = null;
  form.value.specialtyId = null;
}
// 选择学院选项
function queryChangeCollegeSelect(){
  useBaseStore().changeCollege(form.value.collegeId);
  form.value.specialtyId = null;
}
// console.log(form.value.schoolId)
// console.log(form.value.collegeId)
useBaseStore().createFilter(form.value.schoolId,form.value.collegeId);
watch(() => useBaseStore().schoolList, () => {
  if(useBaseStore().isLoadSchool&&useBaseStore().isLoadCollege&&useBaseStore().isLoadSpecialty){
    useBaseStore().createFilter(form.value.schoolId,form.value.collegeId);
  }
},{ immediate: true });
watch(() => useBaseStore().collegeList, () => {
  if(useBaseStore().isLoadSchool&&useBaseStore().isLoadCollege&&useBaseStore().isLoadSpecialty){
    useBaseStore().createFilter(form.value.schoolId,form.value.collegeId);
  }
},{ immediate: true });
watch(() => useBaseStore().specialtyList, () => {
  if(useBaseStore().isLoadSchool&&useBaseStore().isLoadCollege&&useBaseStore().isLoadSpecialty){
    useBaseStore().createFilter(form.value.schoolId,form.value.collegeId);
  }
},{ immediate: true });
</script>
